<template>
  <div>
    <el-select
      id="select"
      ref="selectTable"
      v-model="selectShowValue"
      :placeholder="placeholder"
    >
      <template #empty>
        <div class="vxe-table--ignore-clear" style="padding:10px;">
            <el-table
            height="250"
            ref="table"
            :data="tableData"
            :highlight-current-row="isHighlight"
            :border="border"
            @selection-change="handleSelectionChange"
            style="width: 100%;"
            >
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                    v-for="(field,i) in fields"
                    :prop="field.prop"
                    :label="field.label"
                    :width="field.width"
                    :show-overflow-tooltip="field.showTooltip"
                    :key="i"
                >
                    <template #default="{ row }">
                        <span>{{ row[field.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer-case">
              <el-button @click="cancellation">取消</el-button>
              <el-button type="primary" @click="sureClick">确定</el-button>
            </div>
        </div>
      </template>
    </el-select>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
const props = defineProps({
    placeholder:{
        type:String,
        default:'请选择'
    },
    isHighlight:{
        type:Boolean,
        default:true
    },
    border:{
        type:Boolean,
        default:false
    },
    editable:{
        type:Boolean,
        default:false
    },
    value:{
        default:undefined
    },
    label:{
        default:undefined
    },
    tableData:{
        type:Array,
        default:[]
    },
    fields:{
        type:Array,
        default:[]
    },
    alreadyOption:{
        type:Array,
        default:[]
    },
    alreadyOptionKey:{
      type:String,
      default:'id'
    },
    alreadyOptionLabel:{
      type:String,
      default:'label'
    }
})
const searchQuery = ref('')
const emits = defineEmits(['update']);
const selectTable = ref();
const table = ref();
const selectShowValue = ref(null);
const rowObj = ref(null);
const selectedRows = ref([])
const data = computed({
  get() {
    return props.data;
  },
  set(val) {
    emits("update", val);
  },
});

const cancellation = (()=>{
selectTable.value.blur();
})
const sureClick = (()=>{
  if(selectedRows.value){
    let arr = []
    selectedRows.value.forEach(v=>{
      arr.push(v[props.alreadyOptionLabel])
    })
    selectShowValue.value = arr.join(',')
    emits("update", selectedRows.value);
  }
  selectTable.value.blur();
})
watch(data, (newVal) => {
  if (newVal) {
    if (typeof props.label !== "undefined") {
      if (typeof props.value !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.value] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.label];
      } else if (typeof props.objKey !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.objKey] === props.data[props.objKey]
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.label];
      }
    } else {
      if (typeof props.value !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.value] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.value];
      } else if (typeof props.objKey !== "undefined") {
        let row = props.tableData.find(
          (item) => item[props.objKey] === props.data
        );
        selectShowValue.value =
          typeof row === "undefined" ? props.data : row[props.objKey];
      }
    }
  }
});
watch(selectShowValue, (newVal) => {
  if (newVal === "") {
    emits("update", newVal);
    table.value.setCurrentRow(null);
  }
});
watch(()=>props.alreadyOption,(newVal,oldVal)=>{
	if (newVal) {
    setTimeout(() => {
      let arr = []
      newVal.forEach(item=>{
        arr.push(item[props.alreadyOptionLabel])
        props.tableData.forEach(v=>{
            if(item[props.alreadyOptionKey] == v[props.alreadyOptionKey]){
              table.value.toggleRowSelection(v,true)
            }
        })
      })
      selectShowValue.value = arr.join(',')
    }, 500);
  }
},{immediate:true,deep:true})
const handleSelectionChange = (val) => {
  selectedRows.value = val
  // let arr = []
  // if(val && val.length>0){
  //   val.forEach(v=>{
  //     arr.push(v[props.alreadyOptionLabel])
  //   })
  // }
  // selectShowValue.value = arr.join(',')
  // emits("update", val);
  // selectTable.value.blur();
};
onMounted(()=>{
    if(props.alreadyOption && props.alreadyOption.length>0){
        setTimeout(() => {
          let arr = []
            props.alreadyOption.forEach(item=>{
              arr.push(item[props.alreadyOptionLabel])
                props.tableData.forEach(v=>{
                    if(item[props.alreadyOptionKey] == v[props.alreadyOptionKey]){
                      table.value.toggleRowSelection(v,true)
                    }
                })
            })
            selectShowValue.value = arr.join(',')
        }, 500);
    }
})
</script>
<style>
.footer-case{
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 10px;
box-sizing: border-box;
}
</style>
